import { ITouchEvent, Text } from "@tarojs/components"
import clsx from "clsx"
import { pxTransform } from "@tarojs/taro"

interface IProps {
  name: string
  family?: string
  color?: React.CSSProperties['color']
  size?: number | string
  className?: string
  onClick?: (e: ITouchEvent) => void
  style?: React.CSSProperties
}

const GpFontIcon: React.FC<IProps> = ({ name, family = 'iconfont', color, size, className, onClick, style = {} }) => {
  const styles: React.CSSProperties = {
    cursor: "pointer",
    ...style
  }
  color && (styles.color = color)
  if (size) {
    if (typeof size === "number") {
      styles.fontSize = pxTransform(size)
    } else {
      styles.fontSize = size
    }
  }
  return <Text className={clsx(family, name, className)} style={styles} onClick={onClick}></Text>
}
export default GpFontIcon
